<template>
  <div class="template-list">
    <a-row :gutter="16">
      <a-col
        :span="6"
        v-for="(item, index) in props.cardList"
        :key="index"
        class="poster-item"
      >
        <router-link :to="`/template/${item.id}`">
          <a-card hoverable>
            <template v-slot:cover>
              <div class="ant-card-cover">
                <img :src="item.coverImg" v-if="item.coverImg" />
                <img
                  src="http://typescript-vue.oss-cn-beijing.aliyuncs.com/cover.png"
                  v-else
                />
                <div class="hover-item">
                  <a-button type="primary" size="large">查看详情</a-button>
                </div>
              </div>
            </template>
            <a-card-meta :title="item.title">
              <template v-slot:description>
                <div class="description-detail">
                  <span>作者：{{ item.author }}</span>
                  <span class="user-number">{{ item.copiedCount }}</span>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </router-link>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
//首页的模板列表
import { defineProps } from "vue";
import {
  Row as aRow,
  Col as aCol,
  Card as aCard,
  CardMeta as aCardMeta,
  Button as aButton,
} from "ant-design-vue";

import { TemplateProps } from "@/store/template";

const props = defineProps<{
  cardList: TemplateProps[];
}>();

props.cardList.forEach((item) => {
  item.author;
});
</script>

<style scoped>
.template-list {
  margin-top: 60px;
}
.poster-item .ant-card-hoverable {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}

.description-detail {
  display: flex;
  justify-content: space-between;
  padding: 13px 12px;
  color: #999;
}

.poster-item {
  position: relative;
  margin-bottom: 20px;
}

.poster-item .ant-card-cover {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.poster-item img {
  transform: scale(1.05);
}

.poster-item:hover img {
  transition: all ease-in 0.2s;
}
.poster-item:hover img {
  transform: scale(1.25);
}

.poster-item .ant-card-cover {
  height: 390px;
}

.poster-item:hover .hover-item {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
